import React, {useState} from 'react';
import {CompressOutlined, ExpandOutlined, MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined} from '@ant-design/icons';
import {Header} from 'antd/es/layout/layout';
import {useModel} from 'umi';
import styles from './index.less';
import {useSessionStorageState} from 'ahooks';
import {UserInterface} from '@/types/interface/user.interface';
import UserIcon from '@/layouts/components/LayoutHeader/components/UserIcon';
import FullScreen from '@/layouts/components/LayoutHeader/components/FullScreen';
import Setting from '@/layouts/components/LayoutHeader/components/Setting';

const LayoutHeader = () => {
    const {collapsed, setCollapsed} = useModel('layoutModel');
    const [userInfo] = useSessionStorageState<UserInterface>('userInfo');

    return (
        <Header className={styles['site-layout-background']}>
            <div>
                {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                    className: `${styles.trigger}`,
                    onClick: () => setCollapsed(!collapsed),
                })}
            </div>
            <div className={styles['header-left']}>
                <FullScreen></FullScreen>
                <Setting></Setting>
                <div className={styles['header-left-username']}>{userInfo?.username}</div>
                <UserIcon></UserIcon>
                {/*<ul className={styles['header-left']}>*/}
                {/*    <li></li>*/}
                {/*    <li>2</li>*/}
                {/*    <li className={styles['header-left-full-screen']} onClick={entryOrOutFullScreen}></li>*/}
                {/*    <li className={styles['header-left-icon']}>*/}
                {/*        <UserOutlined/>*/}
                {/*    </li>*/}
                {/*</ul>*/}
            </div>
        </Header>
    );
};
export default LayoutHeader;
